const path = require("path");
const assetsDir = "static"; // 静态资源文件夹名，因为不止一个地方用到，提为常量
module.exports = {
  publicPath: "./", // 文件路径，不确实为根路径
  outputDir: "dist", // 打包后的文件夹名
  assetsDir: assetsDir, // 打包后静态资源文件夹
  productionSourceMap: false, // 打包不需要生成map文件
  devServer: {
    proxy: {
      // 测试环境
      "/dev": {
        target: "http://ios.conifalcon.com:8090/",
        changeOrigin: true,
        pathRewrite: {
          "^/dev": "/"
        }
      }
    }
  },
  configureWebpack: config => {
    gzip(config);
    // 配置打包后文件名，避免文件名一样导致的部署后资源缓存问题
    const Timestamp = Date.now();
    return {
      output: {
        filename: `${assetsDir}/js/[name].${process.env.npm_package_version}.${Timestamp}.js`,
        chunkFilename: `${assetsDir}/js/[name].${process.env.npm_package_version}.${Timestamp}.js`
      }
    };
  },
  chainWebpack: config => {
    scss(config);
    svg(config);
  }
};

/****** gzip  ******/
function gzip(config) {
  const CompressionWebpackPlugin = require("compression-webpack-plugin");
  const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
  const plugins = [];
  plugins.push(
    new CompressionWebpackPlugin({
      filename: "[path].gz[query]",
      algorithm: "gzip",
      test: productionGzipExtensions,
      threshold: 10240,
      minRatio: 0.8
    })
  );
  config.plugins = [...config.plugins, ...plugins];
}

/****** 全局scss  ******/
function scss(config) {
  const types = ["vue"];
  //主要就是这配置的全局引用的scss文件
  types.forEach(type => {
    config.module
      .rule("scss")
      .oneOf(type)
      .use("style-resource")
      .loader("style-resources-loader")
      .options({
        patterns: [
          //这个只是变量，就是不能直接解析为css的
          path.resolve(__dirname, "./src/assets/scss/variable.scss"),
          path.resolve(__dirname, "./src/assets/scss/mixin.scss")
        ]
      });
  });
}

/****** svg  ******/
function svg(config) {
  const svgRule = config.module.rule("svg");
  // 清除已有的所有 loader。
  // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
  svgRule.uses.clear();
  svgRule
    .test(/\.svg$/)
    // 配置icons的目录  我这里默认放在了 /src/assets/icons 目录下  如要修改 记得更换你的目录
    .include.add(path.resolve(__dirname, "./src/assets/svg"))
    .end()
    .use("svg-sprite-loader")
    .loader("svg-sprite-loader")
    .options({
      symbolId: "icon-[name]"
    });
  const fileRule = config.module.rule("file");
  fileRule.uses.clear();
  fileRule
    .test(/\.svg$/)
    // 配置icons的目录  我这里默认放在了 /src/assets/icons 目录下  如要修改 记得更换你的目录
    .exclude.add(path.resolve(__dirname, "./src/assets/svg"))
    .end()
    .use("file-loader")
    .loader("file-loader");
}
